<template>
	<div class="container" style="padding-top: 50px;">
		<h4 v-show="!flag">你还没登录，请先登录</h4>
		<div>
			<div v-show="flag" class="alert alert-info" style="margin-top: 10px;">
				<span>登录成功,{{ user.uname }} 你好</span>
			</div>
			<div class="alert alert-success">用户登录</div>
			<div class="input-control has-icon-left" style="margin-bottom: 10px;">
				<input style="width: 100%;" id="inputAccountExample1" type="text" class="form-control" placeholder="账号" v-model="uidModel" />
				<label for="inputAccountExample1" class="input-control-icon-left"><i class="icon icon-user "></i></label>
				<!-- <span class="g-form-error" style="color:red">{{ userErrors.errorText }}</span> -->
			</div>
			<div class="input-control has-icon-left" style="margin-bottom: 10px;">
				<input style="width: 100%;" id="inputEmailExample1" type="password" class="form-control" placeholder="密码" v-model="upwdModel" />
				<label for="inputEmailExample1" class="input-control-icon-left"><i class="icon icon-envelope "></i></label>
				<label for="inputEmailExample1" class="input-control-icon-right"><i class="icon icon-check"></i></label>
			</div>
			<div>
				<a @click="toRegist">没有账号？<span style="color: #ff2542;">立即注册</span></a>
			</div>
			<button class="btn btn-primary" type="button" @click="onLogin">登录</button>
			&nbsp;&nbsp;
			<button class="btn btn-primary" type="button" @click="logout()">退出</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				showerror: false,
				flag: this.$store.state.loginFlag,
				uidModel: '',
				upwdModel: '',
				errorText: '',
				user: this.$store.state.user
			};
		},
		computed: {},
		methods: {
			onLogin() {
				const config = {
					method: 'post',
					url: 'http://localhost:8080/json/user/login',
					data: {
						uid: this.uidModel,
						upwd: this.upwdModel
					}
				}

				this.$axios(config).then(result => {
					console.log(result.data)
					if (result.data.status == true) {
						this.$store.commit('addUser', result.data.user)
						this.$store.commit('setLoginFlag', true)
						// this.$router.push('/')
						this.$message({
							message: '登录成功!',
							type: 'success'
						});
					} else {
						this.$message.error('登录失败,请确认输入');
					}
				})
			},
			logout() {
				this.$store.commit('setLoginFlag', false)
				// this.$router.push('/')
				this.$message('退出成功~');
			},
			toRegist() {
				this.$router.push('/regist')
			}
		}
	};
</script>

<style>
	.login {
		padding-top: 50px;
	}
</style>
